<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>  
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="UTF-8" />
		<title>Login Page - Ace Admin</title>

		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-part2.min.css" />
		<![endif]-->
		<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="<%=request.getContextPath()%>/ace/assets/js/html5shiv.min.js"></script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/respond.min.js"></script>
		<![endif]-->
		
		<link rel="stylesheet" href="<%=request.getContextPath()%>/static/alert/jquery-confirm.min.css" />
		<!--[if !IE]> -->
		<script src="<%=request.getContextPath()%>/ace/assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->
		<script src="<%=request.getContextPath()%>/static/alert/jquery-confirm.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery.cookie.js"></script>
	</head>

	<body class="login-layout">
		<div class="main-container">
			<div class="main-content" style="height:100vh;background:#394557">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
								<h1>
									<i class="ace-icon fa fa-leaf green"></i>
									<span class="red">办税宝</span>
									<span class="white" id="id-text2">管理平台</span>
								</h1>
								<h4 class="blue" id="id-company-text">&copy; 北京解税宝科技有限公司</h4>
							</div>
							<c:if test="${not empty msg}">
								<div id="myAlert" class="alert alert-warning">
									<a href="#" class="close" data-dismiss="alert">&times;</a>
									<strong>警告！</strong>${msg }。
								</div>
							</c:if>
							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header blue lighter bigger">
												<i class="ace-icon fa fa-coffee green"></i>
												请输入用户信息
											</h4>

											<div class="space-6"></div>

											<form method="POST" id="loginform" action="<%=request.getContextPath()%>/login">
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" name="username" autofocus="autofocus"  id="username" value="<shiro:principal/>" class="form-control required" placeholder="请输入用户名" />
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" name="password"  id="password" value="${user.password}" class="form-control required" placeholder="请输入密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>

													<div class="space"></div>

													<div class="clearfix">

														<button type="submit"  class="width-35 pull-right btn btn-sm btn-primary">
															<i class="ace-icon fa fa-key"></i>
															<span class="bigger-110">Login</span>
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>

										<!-- 	<div class="social-or-login center">
												<span class="bigger-110">Or Login Using</span>
											</div>

											<div class="space-6"></div>

											<div class="social-login center">
												<a class="btn btn-primary">
													<i class="ace-icon fa fa-facebook"></i>
												</a>

												<a class="btn btn-info">
													<i class="ace-icon fa fa-twitter"></i>
												</a>

												<a class="btn btn-danger">
													<i class="ace-icon fa fa-google-plus"></i>
												</a>
											</div> -->
										</div><!-- /.widget-main -->

										<!-- <div class="toolbar clearfix">
											<div>
												<a href="#" data-target="#forgot-box" class="forgot-password-link">
													<i class="ace-icon fa fa-arrow-left"></i>
													I forgot my password
												</a>
											</div>

											<div>
												<a href="#" data-target="#signup-box" class="user-signup-link">
													I want to register
													<i class="ace-icon fa fa-arrow-right"></i>
												</a>
											</div>
										</div> -->
									</div><!-- /.widget-body -->
								</div><!-- /.login-box -->

								

							</div><!-- /.position-relative -->

							<div class="navbar-fixed-top align-right">
								<br />
								&nbsp;
								<a id="btn-login-dark" href="#">Dark</a>
								&nbsp;
								<span class="blue">/</span>
								&nbsp;
								<a id="btn-login-blur" href="#">Blur</a>
								&nbsp;
								<span class="blue">/</span>
								&nbsp;
								<a id="btn-login-light" href="#">Light</a>
								&nbsp; &nbsp; &nbsp;
							</div>
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		

		<!--[if IE]>
<script src="<%=request.getContextPath()%>/ace/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
			 $(document).on('click', '.toolbar a[data-target]', function(e) {
				e.preventDefault();
				var target = $(this).data('target');
				$('.widget-box.visible').removeClass('visible');//hide others
				$(target).addClass('visible');//show target
			 });
			});
			
			
			
			//you don't need this, just used for changing background
			jQuery(function($) {
			 $('#btn-login-dark').on('click', function(e) {
				$('body').attr('class', 'login-layout');
				$('#id-text2').attr('class', 'white');
				$('#id-company-text').attr('class', 'blue');
				
				e.preventDefault();
			 });
			 $('#btn-login-light').on('click', function(e) {
				$('body').attr('class', 'login-layout light-login');
				$('#id-text2').attr('class', 'grey');
				$('#id-company-text').attr('class', 'blue');
				
				e.preventDefault();
			 });
			 $('#btn-login-blur').on('click', function(e) {
				$('body').attr('class', 'login-layout blur-login');
				$('#id-text2').attr('class', 'white');
				$('#id-company-text').attr('class', 'light-blue');
				
				e.preventDefault();
			 });
			 
			});
			
			if(window !=top){  
			    top.location.href=location.href;  
			}  
			<%-- $().ready(function() {
				　　$("#loginform").validate({
				　　onsubmit:true,// 是否在提交是验证
				　　onfocusout:false,// 是否在获取焦点时验证
				　　onkeyup :false,// 是否在敲击键盘时验证

				rules: {　　　　//规则
				　　username: {　　//要对应相对应的input中的name属性
				　　　　required: true
				　　},
				　　password: {
				　　　　required: true
				　　}
				},
				messages:{　　　　//验证错误信息
				　　user: {
				　　　　required: "请输入用户名"
				　　　　},
				　　password: {
				　　　　required: "请输入密码"
				　　}
				},
				submitHandler: function(form) { //通过之后回调
				//进行ajax传值
				$.ajax({
				　　url : "<%=request.getContextPath()%>/login",
				　　type : "post",
				　　data: {
				　　　　username: $("#username").val(),
				　　　　password: $("#password").val(),
					 rememberMe:$('#rememberMe').is(':checked')
				　　},
				　　success : function(msg) {
				　　　　//要执行的代码
				    alert(msg);
				　　}
				});
				},
				invalidHandler: function(form, validator) {return false;}
				}); 
				}); --%>
			$().ready(function() {
				  $("#loginform").validate({
				         rules: {
				    username: "required",
				    password: "required"
				   },
				         messages: {
				    username: "请输入用户名",
				    password: "请输入密码"
				   },
				   errorPlacement: function(error, element) {  
					    error.appendTo(element.parent());  
					}
				     });
				 });
		</script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/bootstrap.min.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/jquery.validate.min.js" type="text/javascript"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	</body>
</html>
